<script lang="ts" setup>
import Location from '@/components/Location/index.vue'
import { get, post, message, loadFile, checkBtnPermission } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import useModal from '@/hooks/useModal'
import { BtnPermission } from '@/enum/permission'
import isEmpty from 'lodash/isEmpty'
import { useUserStore } from '@/store'
const { store } = useModal()
const formRef = ref() as Ref<FormInstance>
const userStore = useUserStore()
const props = defineProps<{ info: any }>()
const emit = defineEmits(['getInfo'])
const detail = reactive({
  address: '',
  backImg: '',
  brief: '',
  city: '',
  district: '',
  ext: '',
  keyword: '',
  lat: '',
  licenseImg: '',
  lng: '',
  name: '',
  logo: '',
  province: '',
  serverRatio: 0,
  streetImg: '',
  isOpenPick: 0,
  updateInfoVO: {},
  updateRemark: '',
  extVO: {
    serveMobile: '',
    serveType: 1,
    serveUrl: '',
  },
})
const setMap = data => {
  console.log('🚀 ~ setMap ~ data:', data)
  const [lat, lng] = data.position
  const { province, city, district, street_number } = data.info.address_component
  detail.lat = lat
  detail.lng = lng
  detail.address = street_number
  detail.district = district
  detail.province = province
  detail.city = city

  store.cancel()
}
const isDisabled = computed(() => !isEmpty(detail.updateInfoVO))

const submit = () => {
  formRef.value.validate(err => {
    if (!err) {
      if (!checkBtnPermission(BtnPermission.编辑)) return false
      const query = Object.assign({}, detail)
      post({ url: '/server-shop/sys-seller/seller/update', data: query }, ({ code, msg }) => {
        message({
          type: code == 200 ? 'success' : 'error',
          content: msg,
        })
        if (code == 200) {
          emit('getInfo')
        }
      })
    }
  })
}

watch(
  () => props.info,
  n => {
    if (!isEmpty(n)) {
      Object.assign(detail, n)
    }
  },
  { deep: true }
)
onMounted(() => {
  if (!isEmpty(props.info)) {
    Object.assign(detail, props.info)
  }
})
</script>
<template>
  <div class="basic">
    <a-form :model="detail" ref="formRef" @submit="submit" :disabled="isDisabled">
      <a-form-item field="name" label="商户名称">
        <a-input v-model="detail.name" />
      </a-form-item>
      <a-form-item field="lat" label="坐标" :rules="[{ required: true, message: '请选择坐标' }]" :validate-trigger="['change', 'blur']">
        <a-button type="primary" @click="store.handleShow({})">坐标拾取</a-button>
      </a-form-item>
      <a-form-item field="address" label="地址" :rules="[{ required: true, message: '请操作坐标拾取获得或手动修改' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.address" placeholder="请操作坐标拾取获得或手动修改" />
      </a-form-item>

      <a-form-item label="商户头图" field="logo" :rules="[{ required: true, message: '请上传商户头图' }]" :validate-trigger="[]">
        <Upload :disabled="isDisabled" :list="detail.logo" v-model:value="detail.logo" :limit="1" />
      </a-form-item>
      <a-form-item label="背景图" field="backImg" :rules="[{ required: true, message: '请上传背景图' }]" :validate-trigger="[]">
        <Upload :disabled="isDisabled" :limit="1" :list="detail.backImg" v-model:value="detail.backImg" />
      </a-form-item>
      <a-form-item label="资质图" field="licenseImg" :rules="[{ required: true, message: '请上传资质图' }]" :validate-trigger="[]">
        <Upload :disabled="isDisabled" :limit="5" :list="detail.licenseImg" v-model:value="detail.licenseImg" />
      </a-form-item>
      <a-form-item label="街景图" field="streetImg" :rules="[{ required: true, message: '请上传街景图' }]" :validate-trigger="[]">
        <Upload :disabled="isDisabled" :limit="5" :list="detail.streetImg" v-model:value="detail.streetImg" />
      </a-form-item>
      <a-form-item field="serverRatio" label="商户手续费" :rules="[{ required: false, message: '请输入商户手续费' }]" :validate-trigger="['change', 'blur']">
        <a-input-number v-model="detail.serverRatio" placeholder="请输入商户手续费" readonly hide-button>
          <template #append>%</template>
        </a-input-number>
      </a-form-item>
      <a-form-item label="简介">
        <a-textarea v-model="detail.brief" placeholder="请输入简介" />
      </a-form-item>
      <a-form-item field="extVO.serveType" label="客服类型" :rules="[{ required: false, message: '请选择' }]" :validate-trigger="['change', 'blur']">
        <a-radio-group
          v-model="detail.extVO.serveType"
          :options="[
            { label: '电话', value: '1' },
            { label: '链接', value: '2' },
          ]"
        />
      </a-form-item>
      <a-form-item v-if="detail.extVO.serveType == 1" field="extVO.serveMobile" label="客服电话" :rules="[{ required: false, message: '请输入客服电话' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.extVO.serveMobile" placeholder="请输入客服电话" />
      </a-form-item>
      <a-form-item v-else field="extVO.serveUrl" label="客服地址" :rules="[{ required: false, message: '请输入客服地址' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.extVO.serveUrl" placeholder="请输入客服地址" />
      </a-form-item>
      <a-form-item label="">
        <div style="flex: 2">
          <a-alert class="mb20" v-if="detail.updateRemark" type="warning">{{ detail.updateRemark }}</a-alert>
          <a-button type="primary" handle-submit html-type="submit" style="margin: auto; width: 200px">保存</a-button>
        </div>
      </a-form-item>
    </a-form>
    <Location v-if="store.show" v-model:show="store.show" @setMap="setMap" />
  </div>
</template>
<style lang="less" scoped>
.basic {
  max-width: 900px;
}
</style>
